
<template>
  <div class="content">
    <div id="container" ref="vChartRef"></div>


    <div class="map-tool">
      <div class="map-search" @click.stop="showSearch"> <i class="iconfont icon-sousuo1"></i></div>
      <div class="search-box" v-show="showHideSearch">
        <input type="text" class="search" id="searchInput" placeholder="搜索">
        <i class="iconfont icon-sousuo1 shanchu"></i>
      </div>
      <div class="tool-list">
        <div class="full-screen" @click="showToolbar"><i class="iconfont icon-gongjuxiang"></i></div>
        <ul class="public-layer-list-white" v-show="showHideToolbar">
          <li v-for="(item, index) in mapTypeList" :key="item.name" @click="checkMap(index)">
            <img :src="item.img">
            <div class="text">{{ item.name }}</div>
          </li>
        </ul>
        <div class="full-screen" @click="initMap"><i class="iconfont icon-shuaxin1"></i></div>
      </div>
      <div class="zoom-list">
        <div class="zoom-box" @click="zoomAdd"><i class="iconfont icon-fangda1"></i></div>
        <div class="zoom-num">{{ zoom }}</div>
        <div class="zoom-box" @click="zoomStu"><i class="iconfont icon-suoxiao1"></i></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, } from 'vue'
import AMapLoader from "@amap/amap-jsapi-loader";
import img1 from './images/map_layer_1.png'
import img2 from './images/map_layer_2.png'
import img3 from './images/map_layer_3.png'
import markerImg from './images/marker.png'
const emits = defineEmits(["toInfo"]);

let gf_layers_wx: any = null
let gf_layers_dl: any = null
let mapIns: any = null
let AMapIns: any = null
const zoom = ref(13)
const mapTypeList = ref([
  {
    img: img1,
    name: '浅色'
  },
  {
    img: img2,
    name: '标准'
  },
  {
    img: img3,
    name: '影像'
  },
])


const propsData = defineProps<{
  lnglat?: [],
}>();

const checkMap = (index: number) => {
  if (index == 0) {
    gf_layers_wx.hide();
    gf_layers_dl.hide();
    mapIns.setMapStyle('amap://styles/whitesmoke');
  }
  if (index == 1) {
    gf_layers_wx.hide();
    gf_layers_dl.hide();
    mapIns.setMapStyle('amap://styles/normal');
  }
  if (index == 2) {
    gf_layers_wx.show();
    gf_layers_dl.show();
  }
}

const zoomAdd = () => {
  var zoomLevel = mapIns.getZoom()
  if (zoomLevel < 18) {
    mapIns.setZoom(zoomLevel + 1)
  }
}
const zoomStu = () => {
  var zoomLevel = mapIns.getZoom()
  if (zoomLevel > 3) {
    mapIns.setZoom(zoomLevel - 1)
  }
}

const showHideSearch = ref(true)
const showSearch = (event: any) => {
  event.preventDefault()
  showHideSearch.value = !showHideSearch.value
}

const showHideToolbar = ref(false)

const showToolbar = (event: any) => {
  event.preventDefault()
  showHideToolbar.value = !showHideToolbar.value
}

const vChartRef = ref<HTMLElement>()
type infoType = {
  lng: number,
  lat: number,
  address: string
}
const parentEvent = (data: infoType) => {
  emits("toInfo", data);
};

const initMap = () => {
  // 初始化
  AMapLoader.load({
    key: 'fde66efefc6b8a88fa392e1f1e856869', //api服务key--另外需要在public中使用安全密钥！！！
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.ToolBar", "AMap.PlaceSearch", "AMap.Geolocation", "AMap.AutoComplete"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    AMapUI: {
      version: '1.1',
      plugins: ['misc/PositionPicker']
    },
  })
    .then(AMap => {
      AMapIns = AMap
      mapIns = new AMap.Map(vChartRef.value, {
        resizeEnable: true,
        zoom: 13, // 地图显示的缩放级别
        center: [120.659630, 31.129728],
      })
      if (propsData.lnglat) { //定位
        console.log(propsData.lnglat)
        mapIns.setCenter(propsData.lnglat)
      }
      // 地图样式切换 -建图层
      gf_layers_wx = new AMap.TileLayer.Satellite({
        visible: false
      }); // 官方图层-卫星
      gf_layers_dl = new AMap.TileLayer.RoadNet({
        visible: false
      }); // 官方图层-道路
      gf_layers_wx.setMap(mapIns);
      gf_layers_dl.setMap(mapIns);
      // 地图样式切换 -建图层

      //监听图层变化
      mapIns.on('zoomchange', function () {
        zoom.value = parseInt(mapIns.getZoom())
      })

      //地图搜索
      loadPlaceSearch()

      //拖拽选点
      DraggingSelectPoints()

    })
    .catch(e => { })
}
initMap()

const loadPlaceSearch = () => {
  let _AMap = AMapIns;
  //构造地点查询类
  const auto = new _AMap.AutoComplete({
    input: "searchInput",
  });
  // 注册监听，当选中某条记录时会触发
  auto.on("select", (e: any) => {
    console.log(e.poi);
    let icon = new _AMap.Icon({
      size: new _AMap.Size(40, 40), // 图标尺寸
      image: markerImg, // Icon的图像
      imageSize: new _AMap.Size(40, 40), // 根据所设置的大小拉伸或压缩图片
    });
    let marker = new _AMap.Marker({
      icon: icon,
      position: [e.poi.location.lng, e.poi.location.lat],
      offset: new _AMap.Pixel(-20, -38),
    });
    mapIns.add(marker);
    mapIns.setCenter([e.poi.location.lng, e.poi.location.lat]);
  });
}

const DraggingSelectPoints = () => {
  var positionPicker = new AMapUI.PositionPicker({
    mode: "dragMap",
    map: mapIns,
    iconStyle: {//自定义外观
      url: 'http://fivefu.com.cn/xiangchengmuckfile/app/dingweiOne.png',//图片地址
      size: [32, 32],  //要显示的点大小，将缩放图片
      ancher: [24, 40],//锚点的位置，即被size缩放之后，图片的什么位置作为选中的位置
    }
  });
  positionPicker.on("success", (positionResult: any) => {
    let data = {
      lng: positionResult.position.lng,
      lat: positionResult.position.lat,
      address: positionResult.address
    }
    parentEvent(data)

  });
  positionPicker.on("fail", function () { });

  positionPicker.start();
}


</script>

<style lang="scss" scoped>
.map-tool {
  position: absolute;
  top: 20px;
  right: 20px;

  .map-search {
    width: 34px;
    height: 34px;
    text-align: center;
    line-height: 34px;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
    position: relative;




  }

  .search-box {
    position: absolute;
    top: 0;
    height: 34px;
    border-radius: 2px;
    background-color: rgb(255, 255, 255);
    display: flex;
    width: 255px;
    align-items: center;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
    right: 45px;

    i {
      color: rgba(0, 0, 0, 0.25);
      font-size: 16px;
    }

    .sousuo {
      position: absolute;
      left: 29px;
    }

    .shanchu {
      position: absolute;
      right: 15px;
    }

    .search {
      height: 28px;
      flex: 1;
      border-radius: 4px;
      outline: none;
      border: none;
      padding: 0 15px;
    }



  }

  .tool-list {
    width: 34px;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);

    .full-screen {
      margin-top: 10px;
      height: 34px;
      text-align: center;
      line-height: 34px;
      position: relative;


    }

    .public-layer-list-white {
      position: absolute;
      right: 45px;
      top: 45px;
      width: 88px;
      border-radius: 2px;
      background-color: rgba(255, 255, 255, 1);
      box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);

      // 小三角
      &:after {
        z-index: 2;
        content: '';
        display: block;
        position: absolute;
        border-color: transparent transparent transparent #fff;
        border-width: 8px 10px;
        top: 8px;
        left: 100%;
        border-style: solid;
      }


      li {
        width: 100%;
        height: 34px;
        background-color: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
          .text {
            color: rgba(22, 119, 255, 1);
            ;
          }
        }

        &.active {
          img {
            border: 2px solid rgba(22, 119, 255, 1);
          }

          .text {
            color: rgba(22, 119, 255, 1);
            ;
          }
        }

        img {
          width: 35px;
          height: 24px;
        }

        .text {
          color: rgba(0, 0, 0, 0.85);
          margin-left: 5px;
        }
      }
    }

    .full-screen:nth-child(1) ::after {
      content: "";
      position: absolute;
      width: 22px;
      height: 2px;
      background-color: rgba(0, 0, 0, 0.15);
      bottom: -6px;
      left: 6px;
    }
  }

  .zoom-list {
    width: 34px;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
    margin-top: 10px;

    .zoom-box {

      height: 34px;
      text-align: center;
      line-height: 34px;
      position: relative;
    }

    .zoom-num {
      color: rgba(22, 119, 255, 1);
      font-size: 14px;
      height: 33px;
      line-height: 33px;
      text-align: center;
      position: relative;
    }

    .zoom-num::after {
      content: "";
      position: absolute;
      width: 22px;
      height: 2px;
      background-color: rgba(0, 0, 0, 0.15);
      bottom: 0;
      left: 6px;
    }

    .zoom-box:nth-child(1)::after {
      content: "";
      position: absolute;
      width: 22px;
      height: 2px;
      background-color: rgba(0, 0, 0, 0.15);
      bottom: 0;
      left: 6px;
    }

    .zoom-box:nth-child(2) {
      margin-top: 0;
    }

  }
}




.content {
  width: 100%;
  height: 100%;
  z-index: 10;
  background: #fff;
  position: relative;

}

#container {
  width: 100%;
  height: 100%;
}

::v-deep .amap-geo {
  display: none;
}
</style>